import styled from 'styled-components'


export const AppBannersWrap =styled.div`
  background: url(${props => props.bgImage}) center center/6000px;
  position: relative;
 .banner-item{
    width:980px;
    height:285px;
    padding-left:230px;
    cursor: pointer;
    img {
      height:100%;
    }
 }

 &:hover {
   .btn {
     opacity:1;
   }
   .prev {
     left:185px;
   }
   .next{
     right:205px;
   }
 }

 .btn {
   position: absolute;
   top:50%;
   transform:translateY(-50%);
   background-color: rgba(31,45,61,.11);
   width:38px;
   height:38px;
   color:#fff;
   cursor: pointer;
   opacity:0;
   transition:all 300ms ease-in;
 }

 .prev {
   left:180px;
 }

 .next {
   right:200px;
 }

`